<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>创建WIKI</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/admin/css/pearForm.css}"/>
    <link rel="stylesheet" th:href="@{/admin/css/easyeditor.css}"/>
    <link rel="stylesheet" th:href="@{/admin/css/fangge-style.css}"/>
    <link rel="stylesheet" th:href="@{/admin/css/doc-common.css}"/>
    <link rel="stylesheet" th:href="@{/admin/css/pear-tree/dtree.css}"/>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: 'Roboto', sans-serif;
            font-size: 14px;
        }

        cite {
            font-family: 'Roboto', sans-serif;
            font-size: 14px;
        }

    </style>
</head>
<body>
<div id="sourceTreeDiv" style="display: none">
</div>
<div class="layui-container" style="height: 100%">
    <div class="layui-row" style="margin-top: 5px">
        <form class="layui-form layui-form-pane" action="">
            <input type="hidden" id="resource" name="resource" value="root">
            <input id="projectId" name="projectId" type="hidden" th:value="${projectId}">
            <input id="id" type="hidden" name="id">

            <div class="layui-form-item" style="margin-left: 20%">
                <div class="layui-inline">
                    <label class="layui-form-label">文档标题</label>
                    <div class="layui-input-inline">
                        <input type="text" id="name" name="name" lay-verify="required"
                               placeholder="请选择文档标题"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">目录</label>
                    <div class="layui-input-inline">
                        <input type="text" id="tableContent" lay-verify="required" name="tableContent"
                               value="一级目录"
                               placeholder="请选择目录"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-primary" lay-submit lay-filter="save">
                        保存文档
                    </button>
                </div>
            </div>
        </form>
    </div>

    <div class="layui-row">
        <div style="height: 100%;width: 100%">
            <textarea id="layeditDemo" rows="30" th:text="${field}"></textarea>
        </div>
    </div>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/admin/js/jquery.js}"></script>
<script th:src="@{/admin/js/marked.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
    var description = [[${description}]];
    var contentFunction = null;

    layui.use([
        'util', 'layer',
        'form',
        'layedit',
        'jquery'], function () {

        var $ = layui.jquery;
        var layer = layui.layer, layedit = layui.layedit;

        layedit.set({
            uploadImage: {
                url: 'your url',
                accept: 'image',
                acceptMime: 'image/*',
                exts: 'jpg|png|gif|bmp|jpeg',
                size: 1024 * 10,
                done: function (data) {
                    console.log(data);
                }
            }
            , uploadVideo: {
                url: 'your url',
                accept: 'video',
                acceptMime: 'video/*',
                exts: 'mp4|flv|avi|rm|rmvb',
                size: 1024 * 10 * 2,
                done: function (data) {
                    console.log(data);
                }
            }
            , uploadFiles: {
                url: 'your url',
                accept: 'file',
                acceptMime: 'file/*',
                size: '20480',
                done: function (data) {
                    console.log(data);
                }
            }
            , calldel: {
                url: 'your url',
                done: function (data) {
                    console.log(data);
                }
            }
            ,area:['100%','70%']
            , autoSync: true
            , facePath: '/restdoc/layui/'
            , devmode: true
            , tool: [
                'undo', 'redo', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'fontBackColor', 'colorpicker', 'face'
                , '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'image_alt', 'attachment', 'anchors'
                , '|'

            ]
            , height: '500px'
        });

        var ieditor = layedit.build('layeditDemo');

        if (description != null && description !== '') {
            layedit.setContent(ieditor, description, false);
        }

        contentFunction = function () {
            return layedit.getContent(ieditor)
        }
    });

    function getValue() {
        return {
            "description": contentFunction()
        }
    }
</script>

</body>
</html>